<h2 *ngIf="shouldShow">测试是否显示</h2>
<input type="button" value="切换" (click)="onToggle()">

<input type="number" [value]="score" (input)="onInput($event)">

<p *ngIf="score < 60">不及格</p>
<p *ngIf="score >= 60 && score < 70">及格</p>
<p *ngIf="score >= 70 && score < 80">中等</p>
<p *ngIf="score >= 80 && score < 90">良好</p>
<p *ngIf="score >= 90">优秀</p>

<div [ngSwitch]="grade()">
    <p *ngSwitchCase="10">满分</p>
    <p *ngSwitchCase="9">优秀</p>
    <p *ngSwitchCase="8">良好</p>
    <p *ngSwitchCase="7">中等</p>
    <p *ngSwitchCase="6">及格</p>
    <p *ngSwitchDefault>其他</p>
</div>


<p [style.background-color]="'red'">这里直接采用style属性</p>
<p [ngStyle]="{'background-color':'red','color':'white'}">这里采用的是ngstyle</p>



<form>
    <h3>动态使用ngstyle</h3>
    <div class="form-group">
        <label for="iptColor">颜色</label>
        <input type="text" class="form-control" id="iptColor" aria-describedby="color" placeholder="输入颜色" #colorinput>
    </div>
    <div class="form-group">
        <label for="iptTextSize">字体大小</label>
        <input type="text" class="form-control" id="iptTextSize" aria-describedby="font size" placeholder="输入字体大小" #fontinput>
    </div>
    <a class="btn btn-primary" href="#" role="button" (click)="apply(colorinput.value,fontinput.value)">应用设置</a>
</form>


<div>
    <span [ngStyle]="{color: 'red'}" [style.font-size.px]="fontSzie">
        红色文本
    </span>
</div>

<div [style.background-color]="color" style="color: white;">
    {{ color }} 背景色
</div>

<div [ngStyle]="{'color': 'white', 'background-color': color, 'font-size': fontSzie}">
   使用ngstyle动态修改
</div>

<h3>使用ngclass</h3>
<div [ngClass]="{bordered:isBordered, blue:false, round:true}">有边框</div>

<div [ngClass]="classObj">采用json对象方式</div>
<div [ngClass]="{bordered:!isBordered, blue:true}">无边框</div>
<div [ngClass]="['bordered', 'blue','round']">采用另一种方式</div>
<a class="btn btn-primary" href="#" (click)="toggleBorder()">切换</a>

<h3>使用ngfor命令</h3>
<ul>
    <li *ngFor="let city of cities">{{city}}</li>
</ul>


<h4>表格案例</h4>
<table class="table">
    <thead class="thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">名字</th>
            <th scope="col">年龄</th>
            <th scope="col">城市</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let p of people;let i = index'>
            <th scope="row">{{i+1}}</th>
            <td>{{p.name}}</td>
            <td>{{p.age}}</td>
            <td>{{p.city}}</td>
        </tr>
    </tbody>
</table>

<h4>表格案例2</h4>
<div *ngFor='let p of peopleByCity'>
    <h2>{{p.city}}</h2>


<table class="table">
    <thead class="thead-light">
        <tr>
            <th scope="col">#</th>
            <th scope="col">名字</th>
            <th scope="col">年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor='let p2 of p.people;let i = index'>
            <th scope="row">{{i+1}}</th>
            <td>{{p2.name}}</td>
            <td>{{p2.age}}</td>
        </tr>
    </tbody>
</table>
</div>